<template>
    <!-- 聊天状态  头部-->
    <chat-status :chatStatue="chatStatue" :chatStatusContent="chatStatusContent" />
    <!-- 聊天内容 -->
    <div
    class="scroll-view"
    :style="{ height: `${pageHeight}px`, marginTop: '54px' }"
  >
    <div class="chat-content-container">
      <div
        v-for="(item, index) in chatItems"
        :key="index"
        class="chat-item-wrapper"
      >
        <chat-info-item
          :length="chatItems.length"
          :index="index"
          :item="item"
          :avatarClick="avatarClick"
        />
      </div>
    </div>
  </div>
  <!-- 输入框 -->
  <div class="chat-input-container">
    <im-chat-input :send="handleSendMessage" :file-select="handleFileSelect" />
  </div>
</template>

<script lang="ts">
import ChatStatus from './chat-info-status.vue';
import ChatInfoItem from './chat-info-item.vue';
import ImChatInput from '../im-chat-input/chat-input.vue';
import type { MessageItem } from '../im-type/im-message-item';
import type { PropType } from 'vue';
export default {
    name: 'chat-info',
    components: {
            ChatStatus,
            ChatInfoItem,
            ImChatInput
        },
    props: {
            // 聊天状态
            chatStatue: {
                type: String,
                default: ''
            },
            // 聊天状态内容
            chatStatusContent: {
                type: String,
                default: ''
            },
            // 聊天内容
            chatItems: {
                type: Array as PropType<MessageItem[]>,
                default: () => []
            },
            // 页面高度
            pageHeight: {
                type: Number,
                default: 1000
            },
            // 输入状态
            inputStatus: {
                type: String,
                default: 'text'
            },
            // 显示语音部分
            showVoicePart: {
                type: Boolean,
                default: false
            },
            // 文本消息
            textMessage: {
                type: String,
                default: ''
            },
            // 发送文本消息
            handleSendMessage: {
                type: Function,
                default: (content: string) => {
                    console.log('发送文本消息',content);
                }
            },
            // 发送文件消息
            handleFileSelect: {
                type: Function,
                default: (files: FileList) => {
                    console.log('发送文件消息',files);
                }
            },
            // 处理表情面板切换
            handlePanelToggle: {
                type: Function,
                default: () => {}
            },
            // 头像点击事件
            avatarClick: {
                type: Function,
                default: (id: number, isMy: boolean) => {
                    console.log('chat-info头像点击事件',id,isMy)
                }
            },
        }
}
</script>

<style scoped>
/* 新增根容器样式 */
:root {
  overflow: hidden;
}

.scroll-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 4px 0;
  height: calc(100vh - 54px - 60px); /* 总高度减去头部和输入框高度 */
  margin-top: 54px;
  pointer-events: auto;
  touch-action: pan-y;
  position: relative;
  z-index: 1;
  /* 新增样式 */
  overflow-x: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* 隐藏滚动条 */
.scroll-view::-webkit-scrollbar {
  display: none;
}

.chat-content-container {
  width: 90%;
  padding: 0 5%;
  pointer-events: auto;
  padding-bottom: 16px;
  /* 新增样式 */
  overflow: hidden;
}

.chat-item-wrapper {
  width: 100%;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .chat-content-container {
    padding: 0 2%;
  }
}

.chat-input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 100vw;
  background: #f8f9fa;
  z-index: 1000;
  border-top: 1px solid #e5e5e5;
  min-height: 60px;
  height: auto;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  color: #666;
  overflow: visible;
  pointer-events: auto;
}

.im-chat-input {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 8px 16px;
  box-sizing: border-box;
}

.toolbar, .input-area, .action-bar {
  width: 100%;
}

.pc-style-input {
  --primary-color: #07c160;
  --border-color: #dcdfe6;
  --toolbar-border: #eee;
}

/* 确保根容器没有限制 */
#app {
  width: 100vw;
  overflow: hidden;
}

.chat-status {
  pointer-events: none;
}

.chat-input-container * {
  pointer-events: auto;
}
</style>
